<template>
	<view>
		<scroll-view class="nav-scroll" :enable-flex="true" scroll-with-animation :throttle="false"
			:scroll-left="scrollToLeft" scroll-x swiperWidth="750" @scroll="handleScroll">
			<view class="nav uni-nav">
				<view class="nav-item" :class="swiperIndex == index ? 'nav-item-act' : ''" :key="index"
					v-for="(item, index) in list" @click="taggleNav(index)">
					{{ item.title }}
				</view>
				<view class="nav-line" :style="style"></view>
			</view>
		</scroll-view>
		<view class="swiper">
			<swiper :current="swiperIndex" :duration="300" class="swiper-1" easing-function="linear"
				@change="swiperChange">
				<swiper-item v-for="(item,index) in AllList" :key="index">
					<scroll-view :lower-threshold="80" :refresher-triggered="refreStatus"
						@refresherrefresh="handleRefre" :refresher-enabled="true" class="swiper-scroll" scroll-y="true"
						@scrolltolower="swiperScrollLower">
						<view>
							<!-- 要显示的是 一张图片 房型名 订单备注 订单创建时间 订单处理状态：为1则为未处理 其他则为已处理 查看详情-->
							<view class="orderItem" v-for="(item,index) in item" :key="index">
								<view class="orderItemimg">
									<image :src="item.houseImg[0]" style="width: 300rpx;height: 200rpx;"></image>
								</view>
								<view class="orderItemInfo">
									<view class="title">
										{{item.houseName}}
									</view>
									<view v-if="item.reserveStatus == 1"
										style="font-size: 45rpx;color: red;margin-top: 30rpx;"><text
											style="margin-left: -30px;">未处理</text> </view>
									<view v-else style="font-size: 40rpx;color: green;"><text
											style="margin-left: -30px;">已处理</text> </view>
									<view class="time">
										{{item.reserveTime}}
									</view>
								</view>
								<view style="color: #FFFFFF;font-size: 20rpx;margin-top: 15rpx;"
									@click="toDetail(item)">查看详情>>></view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		created() {
			let that = this
			let user = uni.getStorageSync('user');
			this.user = user
			new Promise((resolve, reject) => {
				uni.request({
					url: "http://www.zphsow.ltd/api/order/getByUserId?userId=" + user.userId,
					method: "GET",
					success: (res) => {
						that.orderList = res.data.obj
						// 通过订单查询所有房型信息 并保存 着重处理时间 房型照片
						resolve()
					}
				})

			}).then(() => {
				uni.request({
					url: "http://www.zphsow.ltd/api/user/selectByPK?userId=" + user
						.userId,
					method: 'GET',
					success: (res) => {
						that.orderuser = res.data.obj
					}
				})

			}).then(() => {
				for (var i in that.orderList) {
					var orderItem = {}
					that.rentOrder =[]
					that.rehandOrder=[]
					that.newhouseOrder=[]
					that.bussinessOrder=[]
					that.orderList[i].reserveTime = that.getYMDHMS(that.orderList[i].reserveTime)
					new Promise((resolve, reject) => {
						uni.request({
							url: "http://www.zphsow.ltd/api/house/getOne?houseId=" +
								that.orderList[i].reserveHouseId,
							method: 'GET',
							success: (res) => {
								resolve(res)
							}
						})
					}).then((res) => {
						let data = res.data.obj
						data.houseImg = data.houseImg.replaceAll(";,", ";").split(";")
						data.houseImg.pop()
						orderItem.reserveId = that.orderList[i].reserveId
						orderItem.houseImg = data.houseImg
						orderItem.houseName = data.houseName
						orderItem.reserveTime = that.orderList[i].reserveTime
						orderItem.reserveInfo = that.orderList[i].reserveInfo
						orderItem.reserveStatus = that.orderList[i].reserveStatus
						console.log(orderItem.reserveStatus)
						switch (data.houseSaleType) {
							case 1:
								that.rentOrder.push(orderItem)
								break;
							case 2:
								that.rehandOrder.push(orderItem)
								break;
							case 3:
								that.newhouseOrder.push(orderItem)
								break;
							case 4:
								that.bussinessOrder.push(orderItem)
								break;
						}
						orderItem = {}
					})
					orderItem = {}
				}
			}).then(() => {
				that.AllList.push(that.rentOrder)
				that.AllList.push(that.rehandOrder)
				that.AllList.push(that.newhouseOrder)
				that.AllList.push(that.bussinessOrder)
			})
		},
		data() {
			return {
				AllList: [],
				rentOrder: [],
				rehandOrder: [],
				newhouseOrder: [],
				bussinessOrder: [],
				orderuser: {},
				orderList: [],
				user: {},
				swiperIndex: 0, //当前的swiperindex
				navItemWidth: '', //选中下划线的宽度
				navItemLeft: 0, //选中下划线的显示位置
				scrollToLeft: 0, //scrollview需要滚动的距离
				navInfos: [], //所有navitem的节点信息
				parentLeft: 0, //nav盒子的节点信息
				componentWidth: 0, //nav盒子的宽度
				list: [{
						title: '租房',
					},
					{
						title: '二手房',
					},
					{
						title: '新房',
					},
					{
						title: '商用房',
					},
				],
				refreStatus: false
			};
		},
		computed: {
			style() {
				return `width:${this.navItemWidth}px; left:${this.navItemLeft}px`;
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			toDetail(reserve) {
				uni.navigateTo({
					url: "../orderDetail/orderDetail?reserve=" + JSON.stringify(reserve)
				})
			},
			getYMDHMS(timestamp) {
				let time = new Date(timestamp);
				let year = time.getFullYear();
				let month = time.getMonth() + 1;
				let date = time.getDate();

				if (month < 10) {
					month = "0" + month;
				}
				if (date < 10) {
					date = "0" + date;
				}
				return (
					year +
					"-" +
					month +
					"-" +
					date +
					" "
				);
			},
			// 获取dom信息
			init() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.uni-nav').fields({
					rect: true,
					size: true
				}, res => {
					this.parentLeft = res.left;
					this.componentWidth = res.width;
					console.log('res==>', res);
				});
				query.selectAll('.nav-item').fields({
					rect: true,
					size: true
				}, data => {
					data.forEach((item, index) => {
						if (index == 0) {
							this.navItemWidth = item.width;
							this.navItemLeft = item.left;
						}
						this.navInfos.push({
							width: item.width,
							left: item.left
						});
					});
				});
				query.exec();
			},
			// 点击导航切换swiper
			taggleNav(val) {
				this.swiperIndex = val;
			},
			// 滚动tabs以及移动下划线
			scrollDom() {
				let info = this.navInfos[this.swiperIndex];
				let offsetLeft = info.left - this.parentLeft;
				let scrollLeft = offsetLeft - (this.componentWidth - info.width) / 2;
				this.scrollToLeft = scrollLeft < 0 ? 0 : scrollLeft;
				this.navItemLeft = this.navInfos[this.swiperIndex].left;
				setTimeout(() => {
					this.navItemWidth = info.width;
				}, 50);
			},
			// swiper的index变动
			swiperChange(e) {
				this.swiperIndex = e.detail.current;
				this.scrollDom();
				this.$emit('currentIndex', this.swiperIndex);
			},
			// tabs-scrollview触底
			handleScroll(e) {
				this.scrollDom();
			},
			// swiper-ScrollLower触底
			swiperScrollLower() {
				uni.showToast({
					icon: 'none',
					title: `此时为${this.list[this.swiperIndex].title}触底`
				});
				setTimeout(() => {
					this.getData();
				}, 500);
			},
			// 生成列表数据
			getData() {
				uni.showLoading({
					title: '加载中'
				});
				setTimeout(() => {
					for (let index = 0; index < 10; index++) {
						let arr = this.list[this.swiperIndex].content;
						this.$set(arr, arr.length, Math.random() + '-' + index + this.list[this.swiperIndex]
							.title);
					}
					uni.hideLoading();
				}, 1000);
				console.log(this.list[this.swiperIndex]);
			},
			// 下拉事件
			handleRefre() {
				this.refreStatus = true;
				uni.showLoading({
					title: '下拉加载中'
				});
				setTimeout(() => {
					this.list[this.swiperIndex].content = [];
					for (var i = 0; i < 5; i++) {
						this.list[this.swiperIndex].content.push([this.list[this.swiperIndex].title + '下拉-' + i]);
					}
					uni.hideLoading();
				}, 1000);
				setTimeout(() => {
					this.refreStatus = false;
				}, 1000);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.nav-item {
		display: inline-block;
		width: 150rpx;
		margin: 0 16upx;
		text-align: center;
		transition: color 0.3s ease;
	}

	.nav {
		white-space: nowrap;
		position: relative;
		height: 80upx;
		padding: 20upx 0;
	}

	/* #ifndef APP-NVUE */
	::-webkit-scrollbar {
		display: none;
	}

	/* #endif */

	/* #ifdef H5 */
	// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
	scroll-view ::v-deep ::-webkit-scrollbar {
		display: none;
	}

	/* #endif */

	.nav-item-act {
		color: pink;
		font-weight: bolder;
	}

	.nav-line {
		position: absolute;
		bottom: 0;
		height: 10upx;
		border-radius: 10upx;
		background-color: pink;
		transition: left 0.3s ease;
	}

	swiper {
		height: calc(100vh - 80upx);
	}

	swiper-item {
		text-align: center;
		color: #000;
		position: relative;
		background-color: skyblue;
		color: #fff;
	}

	.swiper-item {
		overflow-y: scroll;
	}

	.swiper-item-list {
		height: 400upx;
		border-bottom: 2upx solid pink;
		line-height: 400upx;
	}

	.swiper-scroll {
		height: 100%;
	}

	.orderItem {
		width: 100%;
		height: 300rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		border: 1px solid #FFFFFF;
		margin-bottom: 20rpx;
	}

	.uni-swiper-item {
		background-color: #FFFFFF;
	}

	.orderItemimg {
		margin-top: 45rpx;
	}

	.orderItemInfo {
		margin-top: 30rpx;
	}

	.title {
		font-size: 40rpx;
		margin-left: 20rpx;
	}

	.time {
		margin-top: 30rpx;
	}
</style>
